<template>
  <div class="ll">
    <el-row style="width: 50%;margin: 0 auto;">
      <!--  <el-input placeholder="请输入商品序列" v-model="shop.shop1" maxlength="30" class="il" size="large"> -->
      <!--    <template slot="prepend">商品序列</template>-->
      <!--  </el-input>-->
      <el-input placeholder="请输入商品名称" v-model="shop.shop2" maxlength="30" class="il" size="large">
        <template slot="prepend">商品名称</template>
      </el-input>
      <el-input placeholder="请输入商品价格" v-model="shop.shop3" maxlength="30" class="il" size="large">
        <template slot="prepend"> 商品价格</template>
      </el-input>
      <el-input placeholder="请输入商品数量" v-model="shop.shop4" maxlength="30" class="il" size="large">
        <template slot="prepend">商品数量</template>
      </el-input>
      <!-- <el-col><el-input v-model="name" placeholder="请输入传感器类型"></el-input></el-col>
      <el-col><el-input v-model="id" placeholder="请输入传感器id"></el-input></el-col>
      <el-col style="margin-bottom: 20px"><el-input v-model="threshold" placeholder="请输入阈值（数值）"></el-input></el-col> -->
      <el-button type="success" round @click="sendData">添加商品</el-button>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "sensorRegister",
  data() {
    return {
      shop: {
        shop1: '',
        shop2: '',
        shop3: '',
        shop4: ''
      },
      name: '',
      id: '',
      threshold: '',
    }
  },
  methods: {
    sendData: function () {
      axios({
        url: '/api/shop/Insertshop',
        method: 'post',
        headers: {

          'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
        },
        transformRequest: [data => {

          let formData = new FormData()
          // formData.append('shopid',this.shop.shop1);
          formData.append('shopname', this.shop.shop2);
          formData.append('shopprice', this.shop.shop3);
          formData.append('shopamount', this.shop.shop4);
          return formData
        }],
      }).then(res => {
        console.log(res)
        if (res.data === 1) {
          this.$message.success("添加成功")
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        this.$message.error("添加失败")
        console.log(err)
      })


    }
  },
}
</script>

<style scoped>
.ll {

  background: -webkit-repeating-radial-gradient(rgb(217, 255, 0), yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
  background: -o-repeating-radial-gradient(rgb(0, 255, 170), rgb(255, 0, 0) 10%, rgb(93, 234, 93) 15%); /* Opera 11.6 - 12.0 */
  background: -moz-repeating-radial-gradient(rgb(0, 213, 255), yellow 10%, rgb(0, 98, 128) 15%); /* Firefox 3.6 - 15 */
  background: repeating-radial-gradient(rgb(89, 0, 255), rgb(0, 68, 255) 10%, rgb(162, 64, 243) 15%); /* 标准的语法（必须放在最后） */
  margin-top: 10%;
  margin-left: 25%;

  width: 50%;
  height: 50%;
  transition: 0s linear 0s;
  border: 10px solid #1445b0;
  border-radius: 15px 15px 15px 15px;
  background-color: #1445b0;
  box-shadow: 0px 0px 10px #05f0f0;

}

.ll:hover {
  margin-top: 0%;
  margin-left: 0%;
  /* transform: translate(50%, 50%);  */

  /* transform: scale(2,2); */
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
</style>
